<template>
  <el-form inline label-width="80px">
    <el-form-item label="省">
      <el-select v-model="province" @change="provinceChange">
        <el-option v-for="item in provinceOptions" :value="item.id" :label="item.regionName" :key="item.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="市">
      <el-select v-model="city" @change="cityChange">
        <el-option v-for="item in cityOptions" :value="item.id" :label="item.regionName" :key="item.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="县/区">
      <el-select v-model="area" @change="areaChange">
        <el-option v-for="item in areaOptions" :value="item.id" :label="item.regionName" :key="item.id"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script>
  import {getListByParentId} from '@/api/admin/region'

  export default {
    data() {
      return {
        province: '',
        provinceRegionName: '',
        city: '',
        cityRegionName: '',
        area: '',
        areaRegionName: '',
        provinceOptions: [],
        cityOptions: [],
          areaOptions: [],
      }
    },
    methods: {
      init(data) {
        console.log(data)
        this.province = data.province || ''
        this.city = data.city || ''
        this.area = data.area || ''
        this.$nextTick(() => {
            getListByParentId('86').then(result => {
              this.provinceOptions = result.data.data
            })
            if(this.province){
              getListByParentId(this.province).then(result => {
                this.cityOptions = result.data.data
              })
            }
            if(this.city){
              getListByParentId(this.city).then(result => {
                this.areaOptions = result.data.data
              })
            }
        })
      },
      provinceChange(val){
        this.provinceOptions.forEach(item => {
          if(item.id == val){
            this.provinceRegionName = item.regionName
          }
        })
        this.city = ''
        this.area = ''
        this.cityRegionName = ''
        this.areaRegionName = ''
        this.cityOptions = []
        this.areaOptions = []
        getListByParentId(val).then(result => {
          this.cityOptions = result.data.data
        })
        this.sendParentData()
      },
      cityChange(val){
        this.cityOptions.forEach(item => {
          if(item.id == val){
            this.cityRegionName = item.regionName
          }
        })
        this.area = ''
        this.areaRegionName = ''
        this.areaOptions = []
        getListByParentId(val).then(result => {
          this.areaOptions = result.data.data
        })
        this.sendParentData()
      },
        areaChange(val){
          this.areaOptions.forEach(item => {
          if(item.id == val){
            this.areaRegionName = item.regionName
          }
        })
        this.sendParentData()
      },
      sendParentData() {
        let data = {
          province: this.province,
          provinceRegionName: this.provinceRegionName,
          city: this.city,
          cityRegionName: this.cityRegionName,
          area: this.area,
          areaRegionName: this.areaRegionName,
        }
        this.$emit('getCityData',data)
      }
    }
  }
</script>

<style>
</style>
